requirejs.config({
	paths: {
		vue: "backend/shopro/common/vue",
		g2: "backend/shopro/common/antv"
	}
})
define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'vue', 'g2'], function ($, undefined, Backend, Table, Form, Vue, G2) {

	var Controller = {
		index: function () {
			// 初始化表格参数配置
			Table.api.init({
				extend: {
					index_url: 'shopro/decorate/index' + location.search,
					add_url: 'shopro/decorate/add',
					edit_url: 'shopro/decorate/edit',
					del_url: 'shopro/decorate/del',
					multi_url: 'shopro/decorate/multi',
					table: 'shopro_decorate',
				}
			});

			var table = $("#table");

			// 初始化表格
			table.bootstrapTable({
				url: $.fn.bootstrapTable.defaults.extend.index_url,
				pk: 'id',
				sortName: 'id',
				columns: [
					[
						{ checkbox: true },
						{ field: 'id', title: __('Id') },
						{ field: 'name', title: __('Name') },
						{ field: 'memo', title: __('Memo') },
						{
							field: 'status',
							title: __('Status'),
							searchList: { "normal": __('Normal'), "hidden": __('Hidden') },
							formatter: Table.api.formatter.status
						},
						{
							field: 'platform',
							title: __('Platform'),
							searchList: {
								"H5": __('Platform h5'),
								"wxOfficialAccount": __('Platform wxofficialaccount'),
								"wxMiniProgram": __('Platform wxminiprogram'),
								"App": __('Platform app')
							},
							operate: 'FIND_IN_SET',
							formatter: Table.api.formatter.label
						},
						{
							field: 'dodecorate',
							width: "150px",
							title: '装修操作',
							table: table,
							buttons: [
								{
									name: 'addtabs',
									title: '模块化装修',
									classname: 'btn btn-xs btn-warning btn-addtabs',
									icon: 'fa fa-paint-brush',
									url: 'shopro/decorate/dodecorate'
								}
							],
							formatter: Table.api.formatter.buttons
						},
						{
							field: 'createtime',
							title: __('Createtime'),
							operate: 'RANGE',
							addclass: 'datetimerange',
							formatter: Table.api.formatter.datetime
						},
						{
							field: 'updatetime',
							title: __('Updatetime'),
							operate: 'RANGE',
							addclass: 'datetimerange',
							formatter: Table.api.formatter.datetime
						},
						{
							field: 'operate',
							title: __('Operate'),
							table: table,
							events: Table.api.events.operate,
							formatter: Table.api.formatter.operate
						}
					]
				]
			});

			// 为表格绑定事件
			Table.api.bindevent(table);

			Controller.api.bindevent();

			const SECOND = 1000;
			const MINUTE = 1000 * 60;
			const HOUR = 60 * MINUTE;
			const DAY = 24 * HOUR;

			function toInteger(number, fix = 1) {
				if (Math.round(number) === number) {
					return number;
				}
				return Number(number).toFixed(fix);
			}

			function humanizeDuration(duration, fix = 1) {
				if (duration === 0) {
					return '0';
				}
				if (duration < MINUTE) {
					return toInteger(duration / SECOND, fix) + ' 秒';
				}
				if (duration < HOUR) {
					return toInteger(duration / MINUTE, fix) + ' 分';
				}
				if (duration < DAY) {
					return toInteger(duration / HOUR, fix) + '小时';
				}
				return toInteger(duration / HOUR / 24, fix) + ' 天';
			}
			var vueChart = new Vue({
				el: "#antv-con",
				data() {
					return {
						data: [
							//x轴    y轴1   y轴2
							{
								date: 1489593600000,
								pv: 17,
								time: 12351000
							},
							{
								date: 1489680000000,
								pv: 10,
								time: 18000
							},					
							{
								date: 1490680000000,
								pv: 19,
								time: 17000
							},

						],
						dataList: [{
							title: '支付订单(笔)',
							num: 12,
							checked: true,
							id: 1,
							color: '#F0A70A',
							back: '#FEF6DE'
						},
						{
							title: '待发货订单(笔)',
							num: 16,
							checked: false,
							id: 2,
							color: '#38C769',
							back: '#E2F7E9'
						}, {
							title: '售后维权(笔)',
							num: 12,
							checked: false,
							id: 3,
							color: '#627EFC',
							back: '#EBEEFE'
						},
						{
							title: '退款订单(笔)',
							num: 12,
							checked: false,
							id: 4,
							color: '#FF826C',
							back: '#FFEDEB'
						},
						{
							title: '成交金额(元)',
							num: 12,
							checked: true,
							id: 5,
							color: '#4498FF',
							back: '#E4F0FF'
						}, {
							title: '下单人数(个)',
							num: 12,
							checked: false,
							id: 6,
							color: '#B052EA',
							back: '#F6E9FE'
						},
						{
							title: '支付人数(个)',
							num: 12,
							checked: false,
							id: 7,
							color: '#F0A70A',
							back: '#FEF6DE'
						},
						{
							title: '退款金额(元)',
							num: 12,
							checked: false,
							id: 8,
							color: '#4498FF',
							back: '#E4F0FF'
						}
						],
						selectInputs: [],
					}
				},
				mounted() {
					console.log()
					this.dataList.forEach((item, index) => {
						if (item.checked == true) this.selectInputs.push(item);
					})
					this.charts()
				},
				methods: {
					charts() {
						$("#main-chart").empty()
						const chart = new G2.Chart({
							container: 'main-chart',
							autoFit: true,
							height: 500,
							animate: true,
						});

						chart.data(this.data);
						var leng = 0
						this.selectInputs.forEach(e => {
							if (e.checked) {
								leng++
							}
						})
						if (leng == 1) {
							let title
							this.selectInputs.forEach(i => {
								if (i.checked) {
									title = i.title
								}
							})
							chart.scale({
								pv: {
									alias: title,
									min: 0,
									sync: true, // 将 pv 字段数值同 time 字段数值进行同步
									nice: true,
								},
							});
							chart
								.area()
								.position('date*pv')
								.color(this.selectInputs[0].color).tooltip(false).shape('smooth');
							chart
								.line()
								.position('date*pv')
								.color(this.selectInputs[0].color).shape('smooth');

						} else if (leng == 2) {
							chart.scale({
								date: {
									alias: '日期',
									type: 'time',
								},
								pv: {
									alias: this.selectInputs[1].title,
									min: 0,
									sync: true, // 将 pv 字段数值同 time 字段数值进行同步
									nice: true,
								},
								time: {
									alias: this.selectInputs[0].title,
									formatter: (value) => {
										if (value) {
											return humanizeDuration(value, 0);
										} else {
											return ''
										}

									},
									sync: true, // 将 pv 字段数值同 time 字段数值进行同步
									nice: true,
								},
							});
							chart
								.area()
								.position('date*time')
								.color(this.selectInputs[0].color).tooltip(false).shape('smooth');
							chart
								.line()
								.position('date*time')
								.color(this.selectInputs[0].color).shape('smooth');
							chart
								.area()
								.position('date*pv')
								.color(this.selectInputs[1].color).tooltip(false).shape('smooth');
							chart
								.line()
								.position('date*pv')
								.color(this.selectInputs[1].color).shape('smooth');

						} else {
							return false
						}
						chart.axis('time', {
							grid: null,
							title: {},
							label: {
								formatter: (val) => {
									return val + 'k';
								},
							},
						});
						chart.axis('pv', {
							title: {},
						});

						chart.tooltip({
							showCrosshairs: true, //展示辅助线
							shared: true,
						});


						chart.render();
					},
					selectLine(idx) {
						this.dataList[idx].checked = !this.dataList[idx].checked
						if (this.dataList[idx].checked == true) {
							this.selectInputs.push(this.dataList[idx]);
							if (this.selectInputs.length > 2) {
								this.selectInputs[0].checked = false;
								this.selectInputs.shift();
							}
						} else {
							this.selectInputs.forEach((item, index) => {
								if (this.dataList[idx].id == item.id)
									this.selectInputs.splice(index, 1);
							})
						}

						this.data = [
							//x轴    y轴1   y轴2
							{
								date: 1489593600000,
								pv: 17,
								time:99
							},
							{
								date: 1489680000000,
								pv: 10,
								time:100
							},
							{
								date: 1489766400000,
								pv: 45,
								time:125
							}]
						this.charts()
					}

				}
			})






			$(".header-right-btn").click(function () {
				$(".header-right-btn").removeClass("header-right-btn-active")
				$(this).addClass("header-right-btn-active")
			})
		},
		recyclebin: function () {
			// 初始化表格参数配置
			Table.api.init({
				extend: {
					'dragsort_url': ''
				}
			});

			var table = $("#table");

			// 初始化表格
			table.bootstrapTable({
				url: 'shopro/decorate/recyclebin' + location.search,
				pk: 'id',
				sortName: 'id',
				columns: [
					[
						{ checkbox: true },
						{ field: 'id', title: __('Id') },
						{ field: 'name', title: __('Name'), align: 'left' },
						{
							field: 'deletetime',
							title: __('Deletetime'),
							operate: 'RANGE',
							addclass: 'datetimerange',
							formatter: Table.api.formatter.datetime
						},
						{
							field: 'operate',
							width: '130px',
							title: __('Operate'),
							table: table,
							events: Table.api.events.operate,
							buttons: [
								{
									name: 'Restore',
									text: __('Restore'),
									classname: 'btn btn-xs btn-info btn-ajax btn-restoreit',
									icon: 'fa fa-rotate-left',
									url: 'shopro/decorate/restore',
									refresh: true
								},
								{
									name: 'Destroy',
									text: __('Destroy'),
									classname: 'btn btn-xs btn-danger btn-ajax btn-destroyit',
									icon: 'fa fa-times',
									url: 'shopro/decorate/destroy',
									refresh: true
								}
							],
							formatter: Table.api.formatter.operate
						}
					]
				]
			});

			// 为表格绑定事件
			Table.api.bindevent(table);
		},

		add: function () {
			Controller.api.bindevent();
		},
		edit: function () {
			Controller.api.bindevent();
		},

		api: {
			bindevent: function () {
				Form.api.bindevent($("form[role=form]"));
			}
		}
	};
	return Controller;
});